<template>
  <div class="leagueinfo1_container">
      <!--开始时间弹出层 -->
      <van-popup v-model="timeShow1" :style="{width:'80%'}" id="time_box">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择完整时间"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="confirmFn"
          @cancel="cancelFn"
        />
      </van-popup>
      <!--开始时间弹出层 -->
      <van-popup v-model="timeShow2" :style="{width:'80%'}" id="time_box">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择完整时间"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="confirmFn1"
          @cancel="cancelFn"
        />
      </van-popup>
    <!-- 创建联赛集体信息填写栏 -->
    <div>
      <van-cell-group>
        <van-cell is-link value="上传联赛logo" class="logo">
          <template #title>
            <van-field name="uploader" class="updata_logo">
              <template #input>
              <van-uploader v-model="uploader" />
              </template>
            </van-field>
          </template>
        </van-cell>
        <van-cell-group>
          <van-field v-model="id" label="名称" placeholder="请输入名称" />
          <van-field v-model="adress" label="地区" placeholder="请输入地区" />
        </van-cell-group>
        <van-cell title="开始时间" is-link placeholder="请输入开始时间" :value="this.CreateLeague_obj.data[0].startTime"  @click="timeShow1 = !timeShow1"/>
        <van-cell title="结束时间" is-link placeholder="请输入结束时间" :value="this.CreateLeague_obj.data[0].endTime" @click="timeShow2 = !timeShow2"/>
        <van-cell>
          <van-field
            v-model="message"
            rows="2"
            autosize
            label="所属机构"
            type="textarea"
            maxlength="50"
            placeholder="请填写所属机构"
            show-word-limit
          />
        </van-cell>
      </van-cell-group>
    </div>
    <div @click="send">
      <button id="ok_box">该页面填写完成</button>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'leagueInfo1',
  data() {
    return {
      id: '',
      adress: '',
      activeName: 'a',
      active: 1,
      message: '',
      timeShow1: false,
      timeShow2: false,
      // 时间组件的数据
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      // logo 地址
      uploader: []
    }
  },
  computed: {
    ...mapState(['CreateLeague_obj'])
  },
  methods: {
    confirmFn() { // 确定时间
      this.CreateLeague_obj.data[0].startTime = this.timeFormat(this.currentDate)
      this.timeShow1 = false
      console.log(this.CreateLeague_obj.startTime)
    },
    confirmFn1() { // 确定时间
      this.CreateLeague_obj.data[0].endTime = this.timeFormat(this.currentDate)
      this.timeShow2 = false
      console.log(this.CreateLeague_obj.endTime)
    },
    cancelFn() { // 取消时间
      this.show = true
    },
    timeFormat(time) { // 时间格式化 2019-09-08
      const year = time.getFullYear()
      const month = time.getMonth() + 1// 获取系统日，
      const day = time.getDate() // 天
      return year + '年' + month + '月' + day + '日'
    },
    // 将填写好的信息保存到 vuex 中
    send() {
      console.log(this.uploader)
      this.CreateLeague_obj.data[0].logoflag = false
      this.CreateLeague_obj.data[0].logo = this.uploader
      this.CreateLeague_obj.data[0].id = this.id
      this.CreateLeague_obj.data[0].adress = this.adress
      this.CreateLeague_obj.data[0].mechanism = this.message
      console.log('第一个该页面填写成功+', this.CreateLeague_obj.data)
      // console.log(this.CreateLeague_obj.data.logo[0].content)
    }
  }
}
</script>

<style scoped>
#time_box ::v-deep .van-ellipsis{
  color:black;
}
 ::v-deep .van-cell__title,::v-deep .van-field__control{
  line-height: 10vw;
  width: 57vw;
}
.leagueinfo1_container{
  height: 150vw;
  /* background-color: antiquewhite; */
  position: relative;
}
.van-cell-group{
  margin-left: 4vw;
}
.updata_logo{
  width: 60vw;
  /* background-color: antiquewhite; */
}

::v-deep .updata_logo{
  padding: 0;
}
::v-deep .van-field{
  padding: 0;
}
#ok_box{
  position: absolute;
  width: 90%;
  left: 50%;
  top: 130vw;
  transform: translateX(-50%);
  height: 12vw;
  background-color: rgba(248, 107, 25, 0.973);
  border: none;
  border-radius: 2vw;
}
</style>
